<template name="activeChats">
    <!-- this shows all users that you have a active chat with and the last message -->
    {{#if ready}}
        {{#if activeChats}}
            <div class="list-heading">Active chats</div>
            {{#each activeChats}}
                {{> activeChatsListItem}}
            {{/each}}
        {{else}}
            <div class="no-content">
                <p>You have no chats yet</p>
            </div>
        {{/if}}
    {{else}}
        <div class="main-loading">
            {{> loading size="small"}}
        </div>
    {{/if}}
    <div class="fixed-action-btn">
        <div class="btn-floating btn-large waves-effect" data-open-dialog data-template="createChat" data-fixedfooter="true" data-big="true">
            <i class="material-icons">chat</i>
        </div>
    </div>
</template>

<template name="activeChatsListItem">
    <div class="list-item with-divider clickable">
        {{#if ready}}
            {{#with messageObj}}
                {{#unless encrypted}}
                        <div><img src="{{#with user}}{{gravatar}}{{/with}}" class="circle"></div>
                        <div>
                            <div>
                                <div>{{chatPartners}}</div>
                                <div class="truncate secondary">{{message}}</div>
                            </div>
                        </div>
                        <div>
                            {{formattedDate}}
                        </div>
                {{else}}
                    <div>
                        {{> keyGenLoading size="small"}}
                    </div>
                    <div></div>
                {{/unless}}
            {{else}}
                <div><img src="{{#with user}}{{gravatar}}{{/with}}" class="circle"></div>
                <div>
                    <div>
                        <div>{{chatPartners}}</div>
                        <div class="truncate secondary">No messages yet</div>
                    </div>
                </div>
                <div>
                </div>
            {{/with}}
        {{else}}
            <div>
                {{> loading size="small"}}
            </div>
            <div></div>
        {{/if}}
    </div>
</template>
